@import (reference) "./../../shared/color";
@import (reference) "./../../shared/common";
@import (reference) "./../../tab-list/tab-list.component.less";
.flow-in-light {
  color: @color-red-light;
}

.flow-in-normal {
  color: @color-red-normal;
}

.flow-in-dark {
  color: @color-red-dark;
}

.flow-in-darker {
  color: @color-red-darker;
}

.flow-out-light {
  color: @color-green-light;
}

.flow-out-normal {
  color: @color-green-normal;
}

.flow-out-dark {
  color: @color-green-dark;
}

.flow-out-darker {
  color: @color-green-darker;
}

.legend {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-right: 1em solid;
  margin-right: 2px;
  vertical-align: middle;
  .transition();
}

.with-legend {
  &::before {
    content: "";
    .legend;
  }
}

.fund-flow-wrapper {
  background-color: @color-white;
  height: 100%;
}


.chart-main {
  height: calc(~"100% - 30px");
  padding: @space-common;
  position: relative;
  .chart-pie {
    display: inline-block;
    width: 40%;
    vertical-align: top;
  }
  .chart-legend {
    width: 60%;
    display: inline-block;
    td {
      width: 100px;
    }
  }
  
}